<!-- 装备基础属性 -->
<template>
  <div class="equip-attribute-container">
    <el-card v-for="column in columns" :key="column.name" class="attribute-card">
      <!-- 标题栏 -->
      <template #header>
        <div class="card-header">
          <span>{{ column.name }}</span>
        </div>
      </template>
      <!-- 表单栏 -->
      <el-form :model="equipment">
        <el-form-item 
          v-for="prop in column.properties" 
          :key="prop.field" 
          :label="prop.label"
          :style="prop.type === 'textarea' ? { display: 'block' } : {}"
        >
        <!-- 数字输入框 -->
          <el-input-number
            v-if="prop.type === 'number'"
            v-model="equipment[prop.field]"
            :disabled="props.openType === 'preview'"
            :precision="prop.isPercent ? 2 : 0"
            :step="prop.isPercent ? 0.1 : 1"
            controls-position="right"
            style="width: 100%"
          />
          <!-- 布尔值选择框 -->
          <el-switch
            v-else-if="prop.type === 'boolean'"
            v-model="equipment[prop.field]"
            :disabled="props.openType === 'preview'"
          />
          <!-- 长文本输入框 -->
          <el-input
            v-else-if="prop.type === 'textarea'"
            v-model="equipment[prop.field]"
            type="textarea"
            :disabled="props.openType === 'preview'"
            :rows="3"
            placeholder="请输入内容"
            style="width: 100%;"
          />
          <!-- 字符串输入框 -->
          <el-input
            v-else
            v-model="equipment[prop.field]"
            :disabled="props.openType === 'preview'"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
    </el-card>
  </div>
    
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import type { EquipTpl } from '@/pojo/equip-tpl';
const props = defineProps<{
  equipment?: EquipTpl; // 必须符合 Equipment 类型、
  openType: string; // 打开方式 add/edit/preview
}>();


let columns = ref([
  {
    name: '攻击属性',
    properties: [
      { field: 'attack', label: '基础攻击力', type: 'number' },
      { field: 'attackPercent', label: '攻击力百分比', type: 'number', isPercent: true },
      { field: 'attackFixed', label: '固定攻击力', type: 'boolean' },
      { field: 'attackGrowth', label: '攻击力成长公式', type: 'textarea', isGrowth: true },
      { field: 'attackPercentGrowth', label: '攻击力百分比成长公式', type: 'textarea', isGrowth: true }
    ]
  },
  {
    name: '防御属性',
    properties: [
      { field: 'defense', label: '基础防御力', type: 'number' },
      { field: 'defensePercent', label: '防御力百分比', type: 'number', isPercent: true },
      { field: 'defenseFixed', label: '固定防御力', type: 'boolean' },
      { field: 'defenseGrowth', label: '防御力成长公式', type: 'textarea', isGrowth: true },
      { field: 'defensePercentGrowth', label: '防御力百分比成长公式', type: 'textarea', isGrowth: true }
    ]
  },
  {
    name: '速度属性',
    properties: [
      { field: 'speed', label: '基础速度', type: 'number' },
      { field: 'speedPercent', label: '速度百分比', type: 'number', isPercent: true },
      { field: 'speedFixed', label: '固定速度', type: 'boolean' },
      { field: 'speedGrowth', label: '速度成长公式', type: 'textarea', isGrowth: true },
      { field: 'speedPercentGrowth', label: '速度百分比成长公式', type: 'textarea', isGrowth: true }
    ]
  },
  {
    name: '法力属性',
    properties: [
      { field: 'mana', label: '基础法力值', type: 'number' },
      { field: 'manaPercent', label: '法力值百分比', type: 'number', isPercent: true },
      { field: 'manaFixed', label: '固定法力值', type: 'boolean' },
      { field: 'manaGrowth', label: '法力值成长公式', type: 'textarea', isGrowth: true },
      { field: 'manaPercentGrowth', label: '法力值百分比成长公式', type: 'textarea', isGrowth: true }
    ]
  },
  {
    name: '精力属性',
    properties: [
      { field: 'energy', label: '基础精力值', type: 'number' },
      { field: 'energyPercent', label: '精力值百分比', type: 'number', isPercent: true },
      { field: 'energyFixed', label: '固定精力值', type: 'boolean' },
      { field: 'energyGrowth', label: '精力值成长公式', type: 'textarea', isGrowth: true },
      { field: 'energyPercentGrowth', label: '精力值百分比成长公式', type: 'textarea', isGrowth: true }
    ]
  },
  {
    name: '生命属性',
    properties: [
      { field: 'hp', label: '基础生命值', type: 'number' },
      { field: 'hpPercent', label: '生命值百分比', type: 'number', isPercent: true },
      { field: 'hpFixed', label: '固定生命值', type: 'boolean' },
      { field: 'hpGrowth', label: '生命值成长公式', type: 'textarea', isGrowth: true },
      { field: 'hpPercentGrowth', label: '生命值百分比成长公式', type: 'textarea', isGrowth: true }
    ]
  },
  {
    name: '暴击属性',
    properties: [
      { field: 'critical', label: '基础暴击率', type: 'number' },
      { field: 'criticalPercent', label: '暴击率百分比', type: 'number', isPercent: true },
      { field: 'criticalFixed', label: '固定暴击率', type: 'boolean' },
      { field: 'criticalGrowth', label: '暴击率成长公式', type: 'textarea', isGrowth: true },
      { field: 'criticalPercentGrowth', label: '暴击率百分比成长公式', type: 'textarea', isGrowth: true },
      { field: 'critDamage', label: '基础暴击伤害', type: 'number' },
      { field: 'critDamagePercent', label: '暴击伤害百分比', type: 'number', isPercent: true },
      { field: 'critDamageFixed', label: '固定暴击伤害', type: 'boolean' },
      { field: 'critDamageGrowth', label: '暴击伤害成长公式', type: 'textarea', isGrowth: true },
      { field: 'critDamagePercentGrowth', label: '暴击伤害百分比成长公式', type: 'textarea', isGrowth: true }
    ]
  },
  {
    name: '命中闪避属性',
    properties: [
      { field: 'hit', label: '基础命中值', type: 'number' },
      { field: 'hitPercent', label: '命中值百分比', type: 'number', isPercent: true },
      { field: 'hitFixed', label: '固定命中值', type: 'boolean' },
      { field: 'hitGrowth', label: '命中值成长公式', type: 'textarea', isGrowth: true },
      { field: 'hitPercentGrowth', label: '命中值百分比成长公式', type: 'textarea', isGrowth: true },
      { field: 'dodge', label: '基础闪避值', type: 'number' },
      { field: 'dodgePercent', label: '闪避值百分比', type: 'number', isPercent: true },
      { field: 'dodgeFixed', label: '固定闪避值', type: 'boolean' },
      { field: 'dodgeGrowth', label: '闪避值成长公式', type: 'textarea', isGrowth: true },
      { field: 'dodgePercentGrowth', label: '闪避值百分比成长公式', type: 'textarea', isGrowth: true }
    ]
  },
  {
    name: '抗性属性',
    properties: [
      { field: 'resistCritDamage', label: '抗暴击伤害', type: 'number' },
      { field: 'resistCritDamagePercent', label: '抗暴击伤害百分比', type: 'number', isPercent: true },
      { field: 'resistCritDamageFixed', label: '固定抗暴击伤害', type: 'boolean' },
      { field: 'resistCritDamageGrowth', label: '抗暴击伤害成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistCritDamagePercentGrowth', label: '抗暴击伤害百分比成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistCritical', label: '抗暴击率', type: 'number' },
      { field: 'resistCriticalPercent', label: '抗暴击率百分比', type: 'number', isPercent: true },
      { field: 'resistCriticalFixed', label: '固定抗暴击率', type: 'boolean' },
      { field: 'resistCriticalGrowth', label: '抗暴击率成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistCriticalPercentGrowth', label: '抗暴击率百分比成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistPhysicDamage', label: '抗物理伤害', type: 'number' },
      { field: 'resistPhysicDamagePercent', label: '抗物理伤害百分比', type: 'number', isPercent: true },
      { field: 'resistPhysicDamageFixed', label: '固定抗物理伤害', type: 'boolean' },
      { field: 'resistPhysicDamageGrowth', label: '抗物理伤害成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistPhysicDamagePercentGrowth', label: '抗物理伤害百分比成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistSkillDamage', label: '抗技能伤害', type: 'number' },
      { field: 'resistSkillDamagePercent', label: '抗技能伤害百分比', type: 'number', isPercent: true },
      { field: 'resistSkillDamageFixed', label: '固定抗技能伤害', type: 'boolean' },
      { field: 'resistSkillDamageGrowth', label: '抗技能伤害成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistSkillDamagePercentGrowth', label: '抗技能伤害百分比成长公式', type: 'textarea', isGrowth: true }
    ]
  },
  {
    name: '逆抗属性',
    properties: [
      { field: 'resistResistPhysicDamage', label: '逆抗物理伤害', type: 'number' },
      { field: 'resistResistPhysicDamagePercent', label: '逆抗物理伤害百分比', type: 'number', isPercent: true },
      { field: 'resistResistPhysicDamageFixed', label: '固定逆抗物理伤害', type: 'boolean' },
      { field: 'resistResistPhysicDamageGrowth', label: '逆抗物理伤害成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistResistPhysicDamagePercentGrowth', label: '逆抗物理伤害百分比成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistResistSkillDamage', label: '逆抗技能伤害', type: 'number' },
      { field: 'resistResistSkillDamagePercent', label: '逆抗技能伤害百分比', type: 'number', isPercent: true },
      { field: 'resistResistSkillDamageFixed', label: '固定逆抗技能伤害', type: 'boolean' },
      { field: 'resistResistSkillDamageGrowth', label: '逆抗技能伤害成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistResistSkillDamagePercentGrowth', label: '逆抗技能伤害百分比成长公式', type: 'textarea', isGrowth: true }
    ]
  },
  {
    name: '状态抗性属性',
    properties: [
      { field: 'resistConfuse', label: '抗混乱', type: 'number' },
      { field: 'resistConfusePercent', label: '抗混乱百分比', type: 'number', isPercent: true },
      { field: 'resistConfuseFixed', label: '固定抗混乱', type: 'boolean' },
      { field: 'resistConfuseGrowth', label: '抗混乱成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistConfusePercentGrowth', label: '抗混乱百分比成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistSeal', label: '抗封印', type: 'number' },
      { field: 'resistSealPercent', label: '抗封印百分比', type: 'number', isPercent: true },
      { field: 'resistSealFixed', label: '固定抗封印', type: 'boolean' },
      { field: 'resistSealGrowth', label: '抗封印成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistSealPercentGrowth', label: '抗封印百分比成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistSleep', label: '抗昏睡', type: 'number' },
      { field: 'resistSleepPercent', label: '抗昏睡百分比', type: 'number', isPercent: true },
      { field: 'resistSleepFixed', label: '固定抗昏睡', type: 'boolean' },
      { field: 'resistSleepGrowth', label: '抗昏睡成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistSleepPercentGrowth', label: '抗昏睡百分比成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistParalyze', label: '抗麻痹', type: 'number' },
      { field: 'resistParalyzePercent', label: '抗麻痹百分比', type: 'number', isPercent: true },
      { field: 'resistParalyzeFixed', label: '固定抗麻痹', type: 'boolean' },
      { field: 'resistParalyzeGrowth', label: '抗麻痹成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistParalyzePercentGrowth', label: '抗麻痹百分比成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistCurse', label: '抗诅咒', type: 'number' },
      { field: 'resistCursePercent', label: '抗诅咒百分比', type: 'number', isPercent: true },
      { field: 'resistCurseFixed', label: '固定抗诅咒', type: 'boolean' },
      { field: 'resistCurseGrowth', label: '抗诅咒成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistCursePercentGrowth', label: '抗诅咒百分比成长公式', type: 'textarea', isGrowth: true }
    ]
  },
  {
    name: '特殊抗性属性',
    properties: [
      { field: 'resistPlayer', label: '抗人物伤害', type: 'number' },
      { field: 'resistPlayerPercent', label: '抗人物伤害百分比', type: 'number', isPercent: true },
      { field: 'resistPlayerFixed', label: '固定抗人物伤害', type: 'boolean' },
      { field: 'resistPlayerGrowth', label: '抗人物伤害成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistPlayerPercentGrowth', label: '抗人物伤害百分比成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistPet', label: '抗宠物伤害', type: 'number' },
      { field: 'resistPetPercent', label: '抗宠物伤害百分比', type: 'number', isPercent: true },
      { field: 'resistPetFixed', label: '固定抗宠物伤害', type: 'boolean' },
      { field: 'resistPetGrowth', label: '抗宠物伤害成长公式', type: 'textarea', isGrowth: true },
      { field: 'resistPetPercentGrowth', label: '抗宠物伤害百分比成长公式', type: 'textarea', isGrowth: true }
    ]
  },
])

// 监听传入参数的变化
watch(
  () => props.equipment,
  (newVal, oldVal) => {
    console.log('权限参数发生变化:', newVal, oldVal);
    if (newVal) {
    
    }
  }
);
</script>

<style scoped>
.equip-attribute-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  width: 100%;
}
.attribute-card {
  margin-bottom: 0;
}

:deep(.el-form-item) {
  margin-bottom: 18px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .equip-attribute-container {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}
</style>
